<template>
  <div class="app-container home">
    <!-- 动态标题区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-header">
          <h1>{{ systemTitle }}</h1>
          <p class="subtitle">运销一体化管理平台，智能无人值守解决方案</p>
        </div>
      </el-col>
    </el-row>

    <!-- 数据统计卡片区域 -->
    <el-row :gutter="20" class="stats-section">
      <el-col :xs="12" :sm="6" :md="6">
        <div class="stat-card" @click="goToPage('/system/waybills/index')">
          <div class="stat-icon bg-primary">
            <i class="el-icon-truck"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.totalWaybills }}</div>
            <div class="stat-label">运单总数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-text">今日新增: {{ statsData.todayWaybills }}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6">
        <div class="stat-card" @click="goToPage('/system/salePlan/index')">
          <div class="stat-icon bg-success">
            <i class="el-icon-document"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.totalPlans }}</div>
            <div class="stat-label">计划总数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-text">进行中: {{ statsData.activePlans }}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6">
        <div class="stat-card" @click="goToPage('/system/waybills/index')">
          <div class="stat-icon bg-warning">
            <i class="el-icon-finished"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.completedWaybills }}</div>
            <div class="stat-label">已完成运单</div>
          </div>
          <div class="stat-trend">
            <span class="trend-text">完成率: {{ statsData.completionRate }}%</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6">
        <div class="stat-card" @click="goToPage('/system/waybills/index')">
          <div class="stat-icon bg-danger">
            <i class="el-icon-warning"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.pendingWaybills }}</div>
            <div class="stat-label">待处理运单</div>
          </div>
          <div class="stat-trend">
            <span class="trend-text">紧急: {{ statsData.urgentWaybills }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表和快捷操作区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 图表区域 -->
      <el-col :xs="24" :sm="24" :md="16">
        <!-- 运单趋势图表 -->
        <el-card class="chart-card" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-data-line"></i> 运单趋势分析</span>
            <el-button-group style="float: right;">
              <el-button size="mini" :type="chartPeriod === '7days' ? 'primary' : ''" @click="changeChartPeriod('7days')">近7天</el-button>
              <el-button size="mini" :type="chartPeriod === '30days' ? 'primary' : ''" @click="changeChartPeriod('30days')">近30天</el-button>
              <el-button size="mini" :type="chartPeriod === '90days' ? 'primary' : ''" @click="changeChartPeriod('90days')">近90天</el-button>
            </el-button-group>
          </div>
          <div class="chart-container">
            <waybill-trend-chart :chart-data="waybillTrendData" :height="'300px'" />
          </div>
        </el-card>

        <!-- 运单状态分布饼图 -->
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-pie-chart"></i> 运单状态分布</span>
          </div>
          <div class="chart-container">
            <waybill-status-chart :chart-data="waybillStatusData" :height="'300px'" />
          </div>
        </el-card>
      </el-col>

      <!-- 右侧功能区域 -->
      <el-col :xs="24" :sm="24" :md="8">
        <!-- 快捷操作 -->
        <el-card class="quick-access" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-menu"></i> 快捷操作</span>
          </div>
          <div class="quick-links">
            <el-row :gutter="15">
              <el-col :span="12" v-for="(item, index) in quickActions" :key="index">
                <div class="quick-link-item" @click="goToPage(item.path)">
                  <div class="link-icon" :class="item.color">
                    <i :class="item.icon"></i>
                  </div>
                  <div class="link-text">{{ item.title }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 计划完成情况 -->
        <el-card class="plan-progress" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-s-data"></i> 计划执行情况</span>
          </div>
          <div class="progress-list">
            <div class="progress-item" v-for="(plan, index) in planProgress" :key="index">
              <div class="progress-header">
                <span class="plan-name">{{ plan.name }}</span>
                <span class="progress-value">{{ plan.completed }}/{{ plan.total }}</span>
              </div>
              <el-progress :percentage="plan.percentage" :stroke-width="8" :color="getProgressColor(plan.percentage)"></el-progress>
            </div>
          </div>
        </el-card>

        <!-- 系统通知 -->
        <el-card class="system-notice">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-bell"></i> 系统通知</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <div class="notice-list">
            <div class="notice-item" v-for="(notice, index) in notices" :key="index">
              <div class="notice-icon">
                <i :class="notice.icon" :style="{color: notice.color}"></i>
              </div>
              <div class="notice-content">
                <div class="notice-title">{{ notice.title }}</div>
                <div class="notice-time">{{ notice.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 功能模块导航 -->
<!--    <el-row :gutter="20" class="modules-section">-->
<!--      <el-col :span="24">-->
<!--        <el-card>-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span><i class="el-icon-s-grid"></i> 业务模块</span>-->
<!--          </div>-->
<!--          <div class="modules-container">-->
<!--            <el-row :gutter="20">-->
<!--              <el-col :xs="12" :sm="8" :md="6" v-for="(module, index) in modules" :key="index">-->
<!--                <div class="module-item" @click="goToPage(module.path)">-->
<!--                  <div class="module-icon" :class="module.color">-->
<!--                    <i :class="module.icon"></i>-->
<!--                  </div>-->
<!--                  <div class="module-name">{{ module.name }}</div>-->
<!--                  <div class="module-desc">{{ module.desc }}</div>-->
<!--                  <div class="module-badge" v-if="module.badge">-->
<!--                    <el-badge :value="module.badge" :type="module.badgeType" />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import WaybillTrendChart from './components/WaybillTrendChart'
import WaybillStatusChart from './components/WaybillStatusChart'
import { getConfigKey } from '@/api/system/config'
import { getStats, getWaybillTrend, getWaybillStatus, getPlanProgress } from '@/api/system/dashboard'
import { listNotice } from '@/api/system/notice'

export default {
  name: "Index",
  components: {
    WaybillTrendChart,
    WaybillStatusChart
  },
  data() {
    return {
      // 系统标题
      systemTitle: "运销系统", // 默认标题，将通过API动态获取
      // 版本号
      version: "3.9.0",
      // 图表时间段
      chartPeriod: '7days',
      // 统计数据
      statsData: {
        totalWaybills: 0,
        todayWaybills: 0,
        totalPlans: 0,
        activePlans: 0,
        completedWaybills: 0,
        completionRate: 0,
        pendingWaybills: 0,
        urgentWaybills: 0
      },
      // 运单趋势图表数据
      waybillTrendData: {
        dates: [],
        salesData: [],
        purchaseData: []
      },
      // 运单状态分布数据
      waybillStatusData: [
        { name: '待派车', value: 0, color: '#409EFF' },
        { name: '已派车', value: 0, color: '#67C23A' },
        { name: '运输中', value: 0, color: '#E6A23C' },
        { name: '已完成', value: 0, color: '#F56C6C' },
        { name: '异常', value: 0, color: '#909399' }
      ],
      // 快捷操作
      quickActions: [
        { title: "销售运单", icon: "el-icon-truck", color: "bg-primary", path: "/waybill/waybills" },
        { title: "采购运单", icon: "el-icon-shopping-cart-2", color: "bg-success", path: "/waybill/purchWaybills" },
        { title: "销售计划", icon: "el-icon-document", color: "bg-warning", path: "/sale/salePlan" },
        { title: "采购计划", icon: "el-icon-collection", color: "bg-danger", path: "/sale/purchPlan" },
        // { title: "入库管理", icon: "el-icon-box", color: "bg-primary", path: "/system/inbounds/index" },
        // { title: "出库管理", icon: "el-icon-sold-out", color: "bg-success", path: "/system/outbounds/index" },
        { title: "库存查询", icon: "el-icon-search", color: "bg-warning", path: "/inven/inventorys" },
        { title: "账户查询", icon: "el-icon-data-analysis", color: "bg-danger", path: "/account/funds" }
      ],
      // 计划进度
      planProgress: [],
      // 系统通知
      notices: [],
      // 功能模块
      // modules: [
      //   { name: "运单管理", icon: "el-icon-truck", color: "bg-primary", desc: "销售/采购运单管理", path: "/system/waybills/index", badge: 12, badgeType: "primary" },
      //   { name: "计划管理", icon: "el-icon-document", color: "bg-success", desc: "销售/采购计划制定", path: "/system/salePlan/index", badge: 3, badgeType: "warning" },
      //   { name: "库存管理", icon: "el-icon-box", color: "bg-warning", desc: "入库/出库/盘点管理", path: "/system/inbounds/index", badge: 8, badgeType: "danger" },
      //   { name: "车辆管理", icon: "el-icon-truck", color: "bg-danger", desc: "车辆档案/调度管理", path: "/system/cars/index" },
      //   { name: "司机管理", icon: "el-icon-user", color: "bg-primary", desc: "司机档案/考核管理", path: "/system/drivers/index" },
      //   { name: "客户管理", icon: "el-icon-user-solid", color: "bg-success", desc: "客户档案/关系管理", path: "/system/customers/index" },
      //   { name: "供应商管理", icon: "el-icon-office-building", color: "bg-warning", desc: "供应商档案管理", path: "/system/suppliers/index" },
      //   { name: "基础资料", icon: "el-icon-setting", color: "bg-danger", desc: "商品/仓库等基础数据", path: "/system/baseData/index" }
      // ]
    }
  },
  created() {
    this.getSystemTitle()
    this.loadDashboardData()
    this.loadNotices()
  },
  methods: {
    // 获取系统标题
    getSystemTitle() {
      getConfigKey("sys.index.title").then(response => {
        if (response.msg) {
          this.systemTitle = response.msg
        } else {
          this.systemTitle = process.env.VUE_APP_TITLE || "运销系统"
        }
      }).catch(() => {
        this.systemTitle = process.env.VUE_APP_TITLE || "运销系统"
      })
    },

    // 加载仪表板数据
    async loadDashboardData() {
      try {
        await Promise.all([
          this.loadStats(),
          this.loadWaybillTrendData(),
          this.loadWaybillStatusData(),
          this.loadPlanProgressData()
        ])
      } catch (error) {
        console.error('加载仪表板数据失败:', error)
      }
    },

    // 加载统计数据
    async loadStats() {
      try {
        const response = await getStats()
        if (response.code === 200 && response.data) {
          this.statsData = {
            totalWaybills: response.data.totalWaybills || 0,
            todayWaybills: response.data.todayWaybills || 0,
            totalPlans: response.data.totalPlans || 0,
            activePlans: response.data.activePlans || 0,
            completedWaybills: response.data.completedWaybills || 0,
            completionRate: response.data.completionRate || 0,
            pendingWaybills: response.data.pendingWaybills || 0,
            urgentWaybills: response.data.urgentWaybills || 0
          }
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        this.$modal.msgError('加载统计数据失败')
      }
    },

    // 加载运单趋势数据
    async loadWaybillTrendData() {
      try {
        const response = await getWaybillTrend(this.chartPeriod)
        if (response.code === 200 && response.data) {
          this.waybillTrendData = {
            dates: response.data.dates || [],
            salesData: response.data.salesData || [],
            purchaseData: response.data.purchaseData || []
          }
        }
      } catch (error) {
        console.error('加载运单趋势数据失败:', error)
      }
    },

    // 加载运单状态分布数据
    async loadWaybillStatusData() {
      try {
        const response = await getWaybillStatus()
        if (response.code === 200 && response.data && response.data.statusData) {
          this.waybillStatusData = response.data.statusData
        }
      } catch (error) {
        console.error('加载运单状态分布数据失败:', error)
      }
    },

    // 加载计划进度数据
    async loadPlanProgressData() {
      try {
        const response = await getPlanProgress()
        if (response.code === 200 && response.data && response.data.progressList) {
          this.planProgress = response.data.progressList
        }
      } catch (error) {
        console.error('加载计划进度数据失败:', error)
      }
    },

    // 加载系统通知
    async loadNotices() {
      try {
        const response = await listNotice({ pageNum: 1, pageSize: 4 })
        if (response.code === 200 && response.rows) {
          this.notices = response.rows.map(notice => {
            // 根据通知类型设置图标和颜色
            let icon = 'el-icon-info'
            let color = '#409EFF'
            if (notice.noticeType === '1') {
              icon = 'el-icon-warning'
              color = '#E6A23C'
            } else if (notice.noticeType === '2') {
              icon = 'el-icon-success'
              color = '#67C23A'
            }
            return {
              title: notice.noticeTitle,
              time: notice.createTime,
              icon: icon,
              color: color
            }
          })
        }
      } catch (error) {
        console.error('加载系统通知失败:', error)
      }
    },

    // 切换图表时间段
    changeChartPeriod(period) {
      this.chartPeriod = period
      this.loadWaybillTrendData()
    },

    // 页面跳转
    goToPage(path) {
      if (path && path.startsWith('/')) {
        this.$router.push(path)
      }
    },

    // 获取进度条颜色
    getProgressColor(percentage) {
      if (percentage >= 80) return '#67C23A'
      if (percentage >= 60) return '#E6A23C'
      return '#F56C6C'
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 84px);

  .welcome-header {
    text-align: center;
    padding: 30px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);

    h1 {
      font-size: 32px;
      color: #fff;
      margin-bottom: 10px;
      font-weight: 600;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .subtitle {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
    }
  }

  .stats-section {
    margin-bottom: 20px;

    .stat-card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #409EFF, #67C23A);
      }

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        position: relative;

        i {
          font-size: 24px;
          color: white;
        }

        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: inherit;
          opacity: 0.2;
          transform: scale(1.2);
        }
      }

      .stat-content {
        .stat-number {
          font-size: 28px;
          font-weight: bold;
          margin-bottom: 5px;
          color: #333;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .stat-label {
          color: #666;
          font-size: 14px;
          font-weight: 500;
        }
      }

      .stat-trend {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;

        .trend-text {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  .main-content {
    margin-bottom: 20px;

    .chart-card {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      border: none;

      .el-card__header {
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
        border-bottom: 1px solid #eef2ff;
        border-radius: 12px 12px 0 0;

        span {
          font-weight: 600;
          color: #333;
          font-size: 16px;

          i {
            margin-right: 8px;
            color: #409EFF;
          }
        }
      }

      .chart-container {
        padding: 10px;
      }
    }

    .quick-access {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      border: none;

      .el-card__header {
        background: linear-gradient(135deg, #f0f9f0 0%, #e0f3e0 100%);
        border-bottom: 1px solid #e8f5e8;
        border-radius: 12px 12px 0 0;

        span {
          font-weight: 600;
          color: #333;
          font-size: 16px;

          i {
            margin-right: 8px;
            color: #67C23A;
          }
        }
      }

      .quick-links {
        .quick-link-item {
          text-align: center;
          padding: 20px 10px;
          cursor: pointer;
          transition: all 0.3s ease;
          border-radius: 8px;
          margin-bottom: 10px;

          &:hover {
            transform: translateY(-2px);
            background: #f8f9fa;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          .link-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            position: relative;

            i {
              font-size: 20px;
              color: white;
            }

            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background: inherit;
              opacity: 0.2;
              transform: scale(1.3);
              z-index: -1;
            }
          }

          .link-text {
            font-size: 13px;
            color: #333;
            font-weight: 500;
          }
        }
      }
    }

    .plan-progress {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      border: none;

      .el-card__header {
        background: linear-gradient(135deg, #fff8f0 0%, #ffeee0 100%);
        border-bottom: 1px solid #ffe8d0;
        border-radius: 12px 12px 0 0;

        span {
          font-weight: 600;
          color: #333;
          font-size: 16px;

          i {
            margin-right: 8px;
            color: #E6A23C;
          }
        }
      }

      .progress-list {
        .progress-item {
          margin-bottom: 20px;

          &:last-child {
            margin-bottom: 0;
          }

          .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .plan-name {
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }

            .progress-value {
              font-size: 12px;
              color: #666;
              background: #f0f2f5;
              padding: 2px 8px;
              border-radius: 10px;
            }
          }

          .el-progress {
            ::v-deep .el-progress-bar__outer {
              background: #f0f2f5;
              border-radius: 10px;
            }

            ::v-deep .el-progress-bar__inner {
              border-radius: 10px;
            }
          }
        }
      }
    }

    .system-notice {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      border: none;

      .el-card__header {
        background: linear-gradient(135deg, #fff0f0 0%, #ffe0e0 100%);
        border-bottom: 1px solid #ffd0d0;
        border-radius: 12px 12px 0 0;

        span {
          font-weight: 600;
          color: #333;
          font-size: 16px;

          i {
            margin-right: 8px;
            color: #F56C6C;
          }
        }
      }

      .notice-list {
        .notice-item {
          display: flex;
          align-items: flex-start;
          padding: 12px 0;
          border-bottom: 1px solid #f5f5f5;
          transition: all 0.3s ease;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background: #fafafa;
            border-radius: 6px;
            padding-left: 8px;
            padding-right: 8px;
          }

          .notice-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            margin-top: 2px;

            i {
              font-size: 16px;
            }
          }

          .notice-content {
            flex: 1;

            .notice-title {
              font-size: 14px;
              color: #333;
              margin-bottom: 4px;
              line-height: 1.4;
            }

            .notice-time {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }

  .modules-section {
    .el-card {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      border: none;

      .el-card__header {
        background: linear-gradient(135deg, #f0f0ff 0%, #e0e0ff 100%);
        border-bottom: 1px solid #d0d0ff;
        border-radius: 12px 12px 0 0;

        span {
          font-weight: 600;
          color: #333;
          font-size: 18px;

          i {
            margin-right: 8px;
            color: #7C3AED;
          }
        }
      }
    }

    .modules-container {
      .module-item {
        text-align: center;
        padding: 24px 16px;
        transition: all 0.3s ease;
        border-radius: 12px;
        cursor: pointer;
        position: relative;
        background: white;
        border: 2px solid transparent;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          border-color: #409EFF;
        }

        .module-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 15px;
          position: relative;

          i {
            font-size: 28px;
            color: white;
          }

          &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: inherit;
            opacity: 0.2;
            transform: scale(1.3);
            z-index: -1;
          }
        }

        .module-name {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
          color: #333;
        }

        .module-desc {
          font-size: 12px;
          color: #999;
          line-height: 1.4;
        }

        .module-badge {
          position: absolute;
          top: 10px;
          right: 10px;

          ::v-deep .el-badge__content {
            font-size: 10px;
            border: none;
          }
        }
      }
    }
  }

  // 背景色类
  .bg-primary {
    background: linear-gradient(135deg, #409EFF 0%, #36A2FF 100%);
  }

  .bg-success {
    background: linear-gradient(135deg, #67C23A 0%, #5CB230 100%);
  }

  .bg-warning {
    background: linear-gradient(135deg, #E6A23C 0%, #D4991A 100%);
  }

  .bg-danger {
    background: linear-gradient(135deg, #F56C6C 0%, #F54545 100%);
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 10px;

    .welcome-header {
      padding: 20px 0;

      h1 {
        font-size: 24px;
      }

      .subtitle {
        font-size: 14px;
      }
    }

    .stats-section {
      .stat-card {
        padding: 16px;
        margin-bottom: 10px;

        .stat-icon {
          width: 50px;
          height: 50px;

          i {
            font-size: 20px;
          }
        }

        .stat-content {
          .stat-number {
            font-size: 24px;
          }
        }
      }
    }

    .main-content {
      .quick-links {
        .quick-link-item {
          padding: 15px 8px;

          .link-icon {
            width: 40px;
            height: 40px;

            i {
              font-size: 18px;
            }
          }

          .link-text {
            font-size: 12px;
          }
        }
      }
    }

    .modules-section {
      .module-item {
        padding: 16px 12px;

        .module-icon {
          width: 50px;
          height: 50px;

          i {
            font-size: 24px;
          }
        }

        .module-name {
          font-size: 14px;
        }

        .module-desc {
          font-size: 11px;
        }
      }
    }
  }

  // 卡片通用动画
  .el-card {
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }
  }

  // 滚动条美化
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}
</style>
